<!--------------游客转正页面------------------>
<template>
  <div>
    <topheader :toptitle="toptitle" :goback="goback"/>
    <div class="wrapper yk-wrapper">
      <div class="wrapper-inner">
        <div class="save-game yk-savegame" @click="saveDesk">保存游戏到桌面</div>
        <p class="userID">游客ID：<span>{{userInfo.uid}}</span></p>
        <div class="go-login">
          <div class="login-item yk-username">
            <input type="text" v-model:value="userphone" placeholder="请输入手机号"/>
          </div>
          <div class="login-item yk-code">
            <input type="text" v-model:value="uservalidatecode" placeholder="请输入验证码">
            <span class="v-code" @click="validateCode">{{validateMsg}}</span>
          </div>
          <div class="xy-pwd">
            <input type="password" v-model:value="userpwd" id="xyuserPwd" placeholder="请输入密码"/>
          </div>
          <div class="btn-logingroup clearfix">
            <div class="l btn btn-smallsize btn-bluebg btn-ykbind" @click="bind">绑定并登录</div>
            <div class="r btn btn-smallsize btn-bluebd btn-xyuserlogin">
              <router-link to="/xylogin">XY账号登录</router-link>
            </div>
          </div>
          <p class="warm-prompt">使用专属账号, 游戏更安心哦~</p>
        </div>
        <ul class="yk-list clearfix">
          <li class="yk-list-item">
            <router-link to="/">
              <img src="static/img/icon/icon-pic1.png" alt=""/>
              <span>游戏中心</span>
            </router-link>
          </li>
          <li class="yk-list-item">
            <router-link to="/question">
              <img src="static/img/icon/icon-pic3.png" alt=""/>
              <span>更多问题</span>
            </router-link>
          </li>
        </ul>
        <p class="server">客服QQ：<span v-text="message"
                                     v-clipboard:copy="message"
                                     v-clipboard:success="onCopy"
                                     v-clipboard:error="onError"></span></p>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from "vue"
  import topheader from "@/components/topheader"
  import Message from "iview/src/components/message"
  import {Toast} from "mint-ui"
  import apiConfig from "../config/api.js"
  import md5 from "js-md5"

  Vue.prototype.$Message = Message
  export default {
    name: "userbind",
    components: {
      "topheader": topheader
    },
    data() {
      return {
        goback: false,
        toptitle: "账户",
        userInfo: {
          uid: userInfoKit.getUserInfo().uid
        },
        validateMsg: "获取验证码",
        isValidateing: false,
        userphone: "",
        uservalidatecode: "",
        userpwd: "",
        yklist: [],
        message: "800063550"
      }
    },
    created() {
      
    },
    methods: {
      bind: function () {
        if (this.userphone === "") {
          this.$Message.warning("请输入手机号")
          return
        } else if (this.userphone !== "" && !/^0?1[3|4|5|8|7|9][0-9]\d{8}$/.test(this.userphone)) {
          this.$Message.warning("请输入正确的手机号")
          return
        } else if (this.uservalidatecode === "") {
          this.$Message.warning("请输入验证码")
          return
        } else if (this.userpwd === "") {
          this.$Message.warning("请输入密码")
          return
        } else if (this.userpwd !== "" && !/^[A-Za-z0-9]{6,16}$/.test(this.userpwd)) {
          this.$Message.warning("密码格式不正确，请输入6-12字符")
          return
        } else {
          let params = {
            appid: userInfoKit.appid,
            token: userInfoKit.getUserInfo().token,
            code:	this.uservalidatecode,
            mobile: this.userphone,
            password: md5(this.userpwd)
          }
          // 请求游客转正接口
          this.$http({
              method: "GET",
              url: apiConfig.app.user.bindLogin,
              params: params,
              emulateJSON: true
            }).then(function (resp) {
            if (resp.body.code == "200") {
              // 保存用户信息
              userInfoKit.save(resp.body)
              // 登录成功后跳转到账户页面
              this.$router.push("/userswitch")
            } else {
              this.$Message.warning(resp.body.msg)
            }
          })
        }
      },
      validateCode: function () {
        if (this.isValidateing) {
          return false
        }
        var _this = this
        if (this.userphone === "") {
          this.$Message.warning("请输入手机号")
          return
        } else if (this.userphone !== "" && !/^0?1[3|4|5|8|7|9][0-9]\d{8}$/.test(this.userphone)) {
          this.$Message.warning("请输入正确的手机号")
          return
        } else {
          let params = {
            appid: userInfoKit.appid,
            token: userInfoKit.getUserInfo().token,
            mobile: this.userphone,
            type: "bind"
          }
          // 请求绑定并登录获取验证码接口
          this.$http(
            {
              method: "GET",
              url: apiConfig.app.user.verifyCode,
              params: params,
              emulateJSON: true
            }).then(function (resp) {
              if (resp.body.code == "200") {
                this.isValidateing = true
                var t = 60
                var countDown = function () {
                  if (t > 0) {
                    _this.validateMsg = "倒计时" + t-- + "s"
                    setTimeout(countDown, 1000)
                  } else {
                    _this.validateMsg = "重新发送"
                    _this.isValidateing = false
                  }
                }
                countDown()
              } else {
                this.$Message.warning(resp.body.msg)
              }
          })
        }
      },
      saveDesk: function(){
        if (commen.getBrowserType() == 'Safari') {
          //如果是safari浏览器，直接添加到桌面
          this.$router.push('/save');
        } else {
          //如果不是safari浏览器，复制链接去safari浏览器打开
          this.$router.push('/gotosafari');
        }
      },
      onCopy: function (e) {
        let instance = Toast({
          message: "复制成功",
          position: "middle",
          duration: 5000,
          iconClass: "icon icon-success", // icon 图标的类名
          className: "addClass" // Toast 的类名。可以为其添加样式
        })
        setTimeout(() => {
          instance.close()
        }, 2000)
      },
      onError: function (e) {
        let instance = Toast({
          message: "该浏览器不支持自动复制",
          position: "middle",
          duration: 5000
        })
        setTimeout(() => {
          instance.close()
        }, 2000)
      }
    }
  }
</script>
